<template>
  <div class="internship-container">
    <el-card shadow="never">
      <!-- Search Bar -->
      <div class="filter-header">
        <el-input 
          v-model="filter.name" 
          placeholder="名称"
          style="width: 120px; margin-left: 15px"
          class="filter-item"
          clearable 
          @keyup.enter="handleSearch" 
        />
        <el-input 
          v-model="filter.company" 
          placeholder="实习单位"
          style="width: 140px; margin-left: 10px"
          class="filter-item"
          clearable 
          @keyup.enter="handleSearch" 
        />
        <el-button 
          type="primary"
          style="margin-left: 15px"
          @click="handleSearch"
        >
          <i class="el-icon-search"></i> 搜索 
        </el-button>
        <el-button 
          style="margin-left: 10px"
          @click="resetSearch"
        >
          <i class="el-icon-refresh"></i> 重置 
        </el-button>
      </div>
 
      <!-- Data Table -->
      <el-table 
        :data="filteredData"
        style="width: 100%"
        header-row-class-name="table-header"
        stripe 
      >
        <el-table-column prop="serial" label="序号" width="80" align="center">
          <template #default="scope">
            <span style="color: #909399">{{ scope.row.serial  }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="名称" width="120"/>
        <el-table-column prop="compute" label="申请要求" width="120"/>
        <el-table-column prop="analysis" label="开始时间" width="120"/>
        <el-table-column label="结束时间" width="150">
          <template #default="scope">{{ scope.row.qcDate  }}</template>
        </el-table-column>
        <el-table-column label="申请截止日期" width="150">
          <template #default="scope">{{ scope.row.sepDate  }}</template>
        </el-table-column>
        <el-table-column prop="decision" label="实习单位名称" width="150"/>
        <el-table-column prop="score" label="实习单位简介" width="150" show-overflow-tooltip/>
        <el-table-column prop="monitor" label="审核状态" width="120">
          <template #default="scope">
            <el-tag :type="getStatusTagType(scope.row.monitor)"  size="small">
              {{ scope.row.monitor  }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="120" align="center">
          <template #default="scope">
            <el-button 
              type="text"
              icon="el-icon-edit"
              @click="handleEdit(scope.row)" 
            >
              修改 
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
 
    <!-- Edit Dialog -->
    <el-dialog 
      :title="'修改实习信息 - ' + form.serial" 
      v-model="editDialogVisible"
      width="50%"
      @closed="handleDialogClosed"
    >
      <el-form 
        :model="form"
        :rules="rules"
        ref="formRef"
        label-width="120px"
        label-position="right"
      >
        <el-form-item label="序号" prop="serial">
          <el-input v-model="form.serial"  disabled></el-input>
        </el-form-item>
        <el-form-item label="名称" prop="name">
          <el-input v-model="form.name"  placeholder="请输入实习名称"></el-input>
        </el-form-item>
        <el-form-item label="申请要求" prop="compute">
          <el-input 
            v-model="form.compute" 
            placeholder="请输入申请要求"
          ></el-input>
        </el-form-item>
        <el-form-item label="开始时间" prop="analysis">
          <el-date-picker 
            v-model="form.analysis" 
            type="date"
            placeholder="选择开始时间"
            value-format="yyyy-MM-dd"
            style="width: 100%"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="结束时间" prop="qcDate">
          <el-date-picker 
            v-model="form.qcDate" 
            type="date"
            placeholder="选择结束时间"
            value-format="yyyy-MM-dd"
            style="width: 100%"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="申请截止日期" prop="sepDate">
          <el-date-picker 
            v-model="form.sepDate" 
            type="date"
            placeholder="选择截止日期"
            value-format="yyyy-MM-dd"
            style="width: 100%"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="实习单位名称" prop="decision">
          <el-input v-model="form.decision"  placeholder="请输入实习单位名称"></el-input>
        </el-form-item>
        <el-form-item label="单位简介" prop="score">
          <el-input 
            type="textarea"
            :rows="3"
            v-model="form.score" 
            placeholder="请输入单位简介"
          ></el-input>
        </el-form-item>
        <el-form-item label="审核状态" prop="monitor">
          <el-select 
            v-model="form.monitor" 
            placeholder="请选择审核状态"
            style="width: 100%"
          >
            <el-option label="已通过" value="已通过"></el-option>
            <el-option label="待审核" value="待审核"></el-option>
            <el-option label="审核中" value="审核中"></el-option>
            <el-option label="未通过" value="未通过"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="editDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitForm">保存</el-button>
      </template>
    </el-dialog>
  </div>
</template>
 
<script lang="ts" setup>
import { ref, reactive, computed } from 'vue'
import { ElMessage, ElForm } from 'element-plus'
import type { FormRules } from 'element-plus'
 
interface Internship {
  serial: string 
  name: string 
  compute: string 
  analysis: string 
  qcDate: string 
  sepDate: string 
  decision: string 
  score: string 
  monitor: string 
}
 
interface Filter {
  name: string 
  company: string 
}
 
interface Form extends Internship {}
 
// Reactive state 
const filter = reactive<Filter>({
  name: '',
  company: ''
})
 
const tableData = ref<Internship[]>([
  {
    serial: '202301',
    name: '软件开发实习',
    compute: '计算机专业',
    analysis: '2023-03-01',
    qcDate: '2023-06-30',
    sepDate: '2023-03-15',
    decision: '腾讯科技',
    score: '互联网龙头企业，专注于社交、游戏、云计算等领域',
    monitor: '已通过'
  },
  {
    serial: '202302',
    name: '市场营销实习',
    compute: '专业不限',
    analysis: '2023-04-10',
    qcDate: '2023-07-31',
    sepDate: '2023-04-20',
    decision: '阿里巴巴集团',
    score: '电商行业领先企业，涵盖零售、支付、云计算等业务',
    monitor: '待审核'
  },
  {
    serial: '202303',
    name: '机械设计实习',
    compute: '机械工程专业',
    analysis: '2023-05-05',
    qcDate: '2023-08-31',
    sepDate: '2023-05-15',
    decision: '三一重工',
    score: '重型机械制造商，主要生产工程机械、挖掘机等设备',
    monitor: '未通过'
  },
  {
    serial: '202304',
    name: '金融分析实习',
    compute: '金融学专业',
    analysis: '2023-06-01',
    qcDate: '2023-09-30',
    sepDate: '2023-06-10',
    decision: '中信证券',
    score: '头部证券公司，提供证券经纪、投资银行等服务',
    monitor: '已通过'
  },
  {
    serial: '202305',
    name: '建筑设计实习',
    compute: '建筑学专业',
    analysis: '2023-07-01',
    qcDate: '2023-10-31',
    sepDate: '2023-07-10',
    decision: '华东建筑设计院',
    score: '甲级设计资质单位，承接各类大型建筑设计项目',
    monitor: '审核中'
  }
])
 
const editDialogVisible = ref(false)
const formRef = ref<InstanceType<typeof ElForm>>()
const form = reactive<Form>({
  serial: '',
  name: '',
  compute: '',
  analysis: '',
  qcDate: '',
  sepDate: '',
  decision: '',
  score: '',
  monitor: ''
})
 
// 表单验证函数 
const validateEndDate = (rule: any, value: string, callback: Function) => {
  if (!value) {
    callback(new Error('请选择结束时间'))
  } else if (form.analysis  && new Date(value) < new Date(form.analysis))  {
    callback(new Error('结束时间不能早于开始时间'))
  } else {
    callback()
  }
}
 
const validateDeadline = (rule: any, value: string, callback: Function) => {
  if (!value) {
    callback(new Error('请选择申请截止日期'))
  } else if (form.analysis  && new Date(value) > new Date(form.analysis))  {
    callback(new Error('申请截止日期不能晚于开始时间'))
  } else {
    callback()
  }
}
 
const rules = reactive<FormRules>({
  name: [
    { required: true, message: '请输入实习名称', trigger: 'blur' }
  ],
  compute: [
    { required: true, message: '请输入申请要求', trigger: 'blur' }
  ],
  analysis: [
    { required: true, message: '请选择开始时间', trigger: 'change' }
  ],
  qcDate: [
    { required: true, message: '请选择结束时间', trigger: 'change' },
    { validator: validateEndDate, trigger: 'change' }
  ],
  sepDate: [
    { required: true, message: '请选择申请截止日期', trigger: 'change' },
    { validator: validateDeadline, trigger: 'change' }
  ],
  decision: [
    { required: true, message: '请输入实习单位名称', trigger: 'blur' }
  ],
  monitor: [
    { required: true, message: '请选择审核状态', trigger: 'change' }
  ]
})
 
// Computed properties 
const filteredData = computed(() => {
  return tableData.value.filter(item  => {
    return (
      (!filter.name  || item.name.includes(filter.name))  &&
      (!filter.company  || item.decision.includes(filter.company)) 
    )
  })
}) 
 
// Methods 
const handleSearch = () => {
  ElMessage({
    message: '搜索完成',
    type: 'success',
    duration: 1000 
  })
}
 
const resetSearch = () => {
  filter.name  = ''
  filter.company  = ''
  ElMessage({
    message: '已重置搜索条件',
    type: 'info',
    duration: 1000 
  })
}
 
const handleEdit = (row: Internship) => {
  Object.assign(form,  JSON.parse(JSON.stringify(row))) 
  editDialogVisible.value  = true 
}
 
const handleDialogClosed = () => {
  formRef.value?.resetFields() 
}
 
const submitForm = () => {
  formRef.value?.validate(valid  => {
    if (valid) {
      const index = tableData.value.findIndex(item  => item.serial  === form.serial) 
      if (index !== -1) {
        tableData.value[index]  = { ...form }
        ElMessage.success(' 修改成功')
        editDialogVisible.value  = false 
      }
    }
  })
}
 
const getStatusTagType = (status: string) => {
  switch(status) {
    case '已通过': return 'success'
    case '待审核': return 'warning'
    case '审核中': return 'primary'
    case '未通过': return 'danger'
    default: return 'info'
  }
}
</script>
 
<style scoped>
.internship-container {
  padding: 20px;
}
 
.main-title {
  color: #303133;
  font-size: 18px;
  margin: 0 15px 0 0;
  display: inline-block;
  font-weight: bold;
}
 
.filter-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}
 
.table-header th {
  background-color: #f5f7fa !important;
  font-weight: 600;
  color: #606266;
}
 
.el-table {
  margin-top: 20px;
}
 
.el-table--border th {
  border-right: 1px solid #EBEEF5;
}
 
.el-table--border td {
  border-right: 1px solid #EBEEF5;
}
 
.filter-item {
  margin-left: 10px;
}
 
.el-button--text {
  padding: 0 5px;
}
 
.el-button [class*="el-icon-"] {
  margin-right: 5px;
}
 
/* Dialog form styles */
.el-form-item {
  margin-bottom: 18px;
}
 
.el-date-editor, .el-input, .el-textarea, .el-select {
  width: 100%;
}
 
.el-tag {
  padding: 0 10px;
  height: 24px;
  line-height: 22px;
  font-size: 12px;
}
</style>